<template>
<div class="flex align-center">
  <span class="status d-inline-block" :style="{ backgroundColor: status }"></span>
  <span>{{ text }}</span>
  <span>{{ number }}</span>
</div>
</template>

<script>
export default {
    name: 'statusWithText',
    props: {
        status: {
            type: String,
            default: ''
        },
        text: {
            type: String,
            default: ''
        },
        number: {
            type: Number,
            default: 12
        }
    }
}
</script>

<style lang="scss" scoped>
.status {
  width: 11px;
  height: 12px;
}
</style>
